<template>

    <div>
        <x-button v-if="userStatus === status.__init" @click.native="begin">开启</x-button>

        <div v-if="userStatus === status.__set">
            <x-input title="奖品名称" v-model="setting.prize"></x-input>
            <x-input title="抽奖人数" v-model="setting.luck_num"></x-input>
            <!--<x-input title="参与条件" v-model="setting.price"></x-input>-->
            <x-number title="参与条件(金额)" :min="1" :max="100" value="1" v-model="setting.price" fillable></x-number>
            <!--<input name="a" type="radio" v-model="setting.luck_time" value="3">3分钟
            <input name="a" type="radio" v-model="setting.luck_time" value="5">5分钟-->
            <!--<checklist title="抽奖时间" :options="objectList" v-model="objectListValue" @on-change="change"></checklist>-->
            <cell title="抽奖条件">
            <checker
                v-model="time"
                default-item-class="time-item"
                selected-item-class="time-item-selected"
                disabled-item-class="time-item-disabled"
            >
                <checker-item v-for="i in ['3','5']" :key="i" :value="i">{{i}}分钟</checker-item>
            </checker>
            </cell>
            <x-button @click.native="start">开始抽奖</x-button>
        </div>

        <div v-if="userStatus === status.__ing" style="margin-left:60px;font-size: 25px">
            <clocker :time="downtime" slot="value">
            <!--<span class="day">%_D1</span>
            <span class="day">%_D2</span>天
            <span class="day">%_H1</span>
            <span class="day">%_H2</span>时-->距离开奖剩余
            <span class="day">%_M1</span>
            <span class="day">%_M2</span>分
            <span class="day">%_S1</span>
            <span class="day">%_S2</span>秒
            </clocker>
        </div>
        
        <div v-if="userStatus === status.__bomb">等待开奖中</div>
        <div v-if="userStatus === status.__end">
            中奖人是
            <div v-for="lucker in owner.luckerArr">{{lucker.nick}}</div>
        </div>
        <div v-for="item in items">{{ item.sj }}</div>
        <x-table :cell-bordered="false" style="background-color:#fff;">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>金额</th>
                    <th>奖品</th>
                    <th>状态</th>
                </tr>
            </thead>
            <tbody>
                <tr v-if="userStatus === status.__ing">
                    <td>*</td>
                    <td>{{ setting.price }}</td>
                    <td>{{ setting.prize }}</td>
                    <td>进行中</td>
                </tr>
                <tr v-for="list in owner.listArr">
                    <td>{{ list.code }}</td>
                    <td>{{ list.price }}</td>
                    <td>{{ list.prize }}</td>
                    <td>已结束</td>
                </tr>
            </tbody>
        </x-table>
<!--<div>获奖者:{{CHAT.lucker.nick }}</div>
        <div>商户状态{{CHAT.status}}</div>-->
<!--{{ setting }}-->
</div>

</template>

<script>
    import owner from '../../api/owner.js'
    import status from '../../api/status.js'
    import dateformat from 'dateformat'
    import { Cell,Checker,CheckerItem,XTable, Clocker, XButton,XInput,XNumber,Checklist } from 'vux'
    import user from '../../api/user.js'
    export default {
        components: {
            Cell,
            Checker,
            CheckerItem,
            XTable,
            Clocker,
            XButton,
            XInput,
            XNumber
        },
        data() {
            return {
                time:'3',
                objectList: [{key: '3', value: '3分钟'}, {key: '5', value: '5分钟'}],
                objectListValue: ['3'],
                items: [],
                owner,
                status,
                dateformat,
                downtime:'',
                setting: {
                    price: null,
                    luck_num: null,
                    prize: null,
                    mch_id: null,
                    mch_name: null,
                    oper: 111,
                    luck_time:3,
                    status: 1
                }, //设置参数
                mch_id: 1,
                mch_name: '1912_酒吧',
                title: '',
                nick: 'smoke',
                sign: "",
                showTime:false,
                userStatus:0
            }
        },
        watch:{
            'userStatus':function(val,oldVal){
                // 如果是登录状态
                console.log("status"+val+","+oldVal)
                user.setCookie('login_status',val)
                switch(val){
                    case status.__init:
                        break;
                    case status.__set:
                        // owner.init({
                        //     mch_id:user.userinfo.mch_id,
                        //     mch_name:user.userinfo.mch_name,
                        //     nick:user.userinfo.nick,
                        //     usertype:2
                        // })
                        // console.log(dateformat(new Date(new Date().getTime()+30000),'yyyy-mm-dd hh:mm:ss'))
                        break;
                    case status.__ing:
                        // 倒计时计算
                        this.downtime = dateformat(new Date(new Date().getTime()+30000),"yyyy-mm-dd HH:MM:ss")
                        // console.log(this.downtime)
                        var item = {}
                        this.items.push(item)
                        this.sign = "抽奖开始"

                        var _ = this
                        // 写入数据库
                        this.$axios.post("/lottery/add",{
                            mch_id,
                            mch_name,
                            open_user,
                            prize,
                            low_price,
                            tag
                        }).then((ret)=>{
                            setTimeout(function(){
                                _.bomb()
                            },30000)
                        })
                        
                        break;
                    case status.__bomb:
                        var _ = this
                        setTimeout(function(){
                            _.init()
                        },10000)
                        break;
                    case status.__end:
                        break;
                    default:
                }
            }
        },
        mounted() {
            // this.userStatus = user.getCookie('login_status')
            // if(this.userStatus == undefined){
                this.userStatus = status.__init
            //     user.setCookie('login_status',status.__beigin)
            // }
            console.log('当前状态为',this.userStatus)
        },
        methods: {
            change(val){
                console.log(val)
                // this.objectListValue = []
                // this.objectListValue.push(val)
            },
            init(){
                this.userStatus = status.__init
            },
            begin(){
                this.userStatus = status.__set
            },
            start(){
                this.userStatus = status.__ing
            },
            bomb(){
                this.userStatus = status.__bomb
            },
            end(){
                // owner.stat = status.__end
                this.userStatus = status.__begin
            }
        }
    };
</script>

<style lang="less" scoped>
    input{
        border: 1px solid black
    }
    .day {
        background-color:#000;
        color:#fff;
        text-align:center;
        display:inline-block;
        padding:0 3px;
        border-radius:3px;
    }
    .time-item {
        width: 100px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        border-radius: 3px;
        border: 1px solid #ccc;
        background-color: #fff;
        margin-right: 26px;
    }
    .time-item-selected {
        border-color: #ff4a00;
    }
    .time-item-disabled {
        color: #999;
    }
</style>